<template>
  <div id="detail">
    <!-- -------标题栏------------ -->
    <title-bar>
      <h2 slot="left"> &lt; </h2>
      <h2 slot="center">详情</h2>
    </title-bar>
    <!-- -------轮播图------------ -->
    <van-swipe class="my-swipe" :autoplay="0" indicator-color="white">
      <van-swipe-item 
      v-for="(item,index) in goods_info.pics" :key="index"
      >
        <img :src="item.pics_sma_url" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- -------商品信息---------- -->
    <div class="shop-message">
      <p class="shop-price">￥{{goods_info.goods_price}}</p>
      <div class="shop-title">
        <p class="shop-mes">
          {{goods_info.goods_name}}
        </p>
        <div class="shop-collect" @click="collectClick">
          <van-icon 
            name="star-o" 
            ref="icon" 
            :style="{color:isChecked ? 'red' : '#333'}"/>
          <p ref='ct'>{{cert}}</p>
        </div>
      </div>
      <p class="shop-baoyou">快递: 免运费</p>
    </div>

    <!-- ---------底部菜单栏------------ -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="联系客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="num" @click="goToShopCart" />
      <van-goods-action-button color="#ffb400" type="info" text="加入购物车" @click="addShop" />
      <van-goods-action-button color="#ff2d4a" type="info" text="立即购买" />
    </van-goods-action>

  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Icon, GoodsAction, GoodsActionIcon, GoodsActionButton, Toast } from 'vant';
import "vant/lib/toast/style"
import "vant/lib/swipe/style"
import 'vant/lib/swipe-item/style'
import 'vant/lib/icon/style'
import 'vant/lib/goods-action/style'
import 'vant/lib/goods-action-icon/style'
import 'vant/lib/goods-action-button/style'
Vue.use(Toast);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
import TitleBar from '../components/common/title_bar/TitleBar.vue'
export default {
  components: { TitleBar },
  name:"Detail",
  props:{
    goods_id:Number
  },
  data() {
    return {
      goods_info:{},
      cert:"收藏",
      isChecked:false,
      num:0
    }
  },
  filters:{
    toFixed(v){
      if(v){
        return v.toFixed(2)
      }  
    }
  },
  created() {
   this.$http({
     url:"/api/public/v1/goods/detail",
     methods:"get",
     params:{
       goods_id:this.goods_id
     }
   }).then(res => {
     console.log(res)
     this.goods_info = res.data.message
   })
   var s = localStorage.getItem('shopcart');
   s = s == null ? [] : JSON.parse(s)
   if(s.length == 0){
     this.num = ""
   }else{
     this.num = s.length
   }
   
  },
  methods:{
    collectClick(){
      const ic =  this.$refs.icon
      if(ic.classList.contains("van-icon-star-o")){
        ic.classList.add("van-icon-star")
        ic.classList.remove("van-icon-star-o")
        this.cert = "已收藏"
        this.isChecked = true
        
      }else{
        ic.classList.remove("van-icon-star")
        ic.classList.add("van-icon-star-o")
        this.cert = "收藏"
        this.isChecked = false       
      }
    },
    addShop(){
      Toast.success('加入成功')
      const shopInfo = {
        shop_name:this.goods_info.goods_name,
        shop_id:this.goods_info.goods_id,
        shop_price:this.goods_info.goods_price,
        shop_img:this.goods_info.goods_small_logo,
        isChecked:true
      }
     var s =  localStorage.getItem('shopcart');
     s = s == null ? [] :  JSON.parse(s)
     var boo = s.every((item,index)=> {
       if(item.shop_id == shopInfo.shop_id){
         s[index].shop_num++
       }
       return item.shop_id != shopInfo.shop_id
     })
     if(boo){
       shopInfo.shop_num = 1 ;
       s.push(shopInfo)
     }

     localStorage.setItem('shopcart',JSON.stringify(s))
      this.num = s.length
    },
    goToShopCart(){
      this.$emit("goCart")
    }
  }
}
</script>

<style scoped>
  img{
    width: 100%;
    height: 300px;
  }
  .shop-price{
    font-size: 26px;
    color: red;
    padding-left: 10px;
  }
  .shop-title{
    display: flex;
  }
  .shop-collect{
    width: 80px;
    text-align: center;
    border-left: 1px solid #ccc;
    line-height: 30px;
  }
  .shop-mes{
    flex: 1;
    padding: 0px 30px 0px 10px;
  }
  .shop-baoyou{
    color: #888;
    font-size: 14px;
    padding-left: 10px;
    margin-top: 5px;
  }
  .van-goods-action .van-goods-action-button{
    border-radius: 0;
  }
  .van-goods-action-icon{
    width: 80px;
  }
</style>


arr  = [ 1,2,3,4,5]

3